<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>
            <!-- 表单 -->
            <el-form ref="loginform" class="login_form" :model="form" :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model.trim="form.username" placeholder="请输入账户名称" :prefix-icon="Search"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model.trim="form.password" placeholder="请输入密码" :prefix-icon="Lock" show-password></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="submit(loginform)">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
//导入相关钩子
import { onMounted, ref, reactive } from "vue";
import { get, post } from '../plugin/axios'
import { Lock, Search } from '@element-plus/icons-vue'
import { getCurrentInstance } from "vue"; //组件实例
const { proxy } = getCurrentInstance(); // 解构
console.log('proxy对象：', proxy);
//引入路由
import { useRouter } from "vue-router";
let router = useRouter()
//数据声明==数据声明==数据声明==数据声明============================================================
let form = reactive({
    username: localStorage.getItem('username'),
    password: localStorage.getItem('password')
})
const loginform = ref(null)
const rules = reactive({
    username: [
        { required: true, message: '请输入账户名称', trigger: 'blur' },
        { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
    ]
})
//生命周期钩子相关==============================================================================
onMounted(() => {//初始化
    console.log("登录页面加载完成");
});

//业务逻辑========================================================================================
//登录
const submit = (formEl) => {
    let { validate } = loginform.value
    validate((valid) => {
        if (valid) {
            console.log(form.username);
            console.log(form.password);
            post('/api/dm/zxyDateLogin', form).then(data => {
                console.log(data)
                confirmLogin()
                console.log("登录成功");
            }).catch(err => {
                console.log('登录失败！');
                console.log(err)
                confirmLogin()
            })
        } else {
            console.log('error submit!')
        }
    })
}
// function submit(formName) {
//     $refs[formName].validate(valid =>{

//     })

//     
// }
//完成登录
function confirmLogin() {
    localStorage.setItem('username', form.username)
    localStorage.setItem('password', form.password)
    window.sessionStorage.setItem('token', 'aaa-jdbc-a')
    router.push('/home')
}




</script>
<style lang="less" scoped>
.login_container {
    background-color: #4b5b6b;
    height: 100%;
}

.login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }
}

.login_form {
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btns {
    display: flex;
    justify-content: flex-end;
}
</style>